<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>编辑歌单</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="css/footer.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        .el-tag + .el-tag {
            margin-left: 10px;
        }
        .button-new-tag {
            margin-left: 10px;
            height: 32px;
            line-height: 30px;
            padding-top: 0;
            padding-bottom: 0;
        }
        .input-new-tag {
            width: 90px;
            margin-left: 10px;
            vertical-align: bottom;
        }
    </style>
</head>
<body>
    <div id="cPlayListApp" class="w-50 m-auto container-fluid">
        <div class="mt-5">
            <el-row :gutter="20">
                <el-col :span="20">
                    <div class="grid-content bg-purple">
                        <el-form ref="form"  label-width="80px">
                            <el-form-item label="歌单名称">
                                <el-input v-model="plname"></el-input>
                            </el-form-item>
                            <el-form-item label="简介">
                                <el-input type="textarea" :rows="3" v-model="desc"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <div>标签</div>
                                <el-tag
                                        :key="tag"
                                        v-for="tag in cates"
                                        closable
                                        :disable-transitions="false"
                                        @close="handleClose(tag)">
                                    {{tag}}
                                </el-tag>
                                <el-button class="button-new-tag" size="small" @click="dialogVisible=true">+新标签</el-button>
                                <el-dialog
                                        title="最多选择三个"
                                        :visible.sync="dialogVisible"
                                        width="30%">
                                    <div v-show="checkList>3">最多选择三个</div>
                                    <el-checkbox-group v-model="checkList">
                                        <el-checkbox v-for="cate in categorites" :label="cate.cid">{{cate.cname}}</el-checkbox>
                                    </el-checkbox-group>
                                    <span slot="footer" class="dialog-footer">
                                        <el-button @click="dialogVisible = false">取 消</el-button>
                                        <el-button type="primary" @click="SetTagName">确 定</el-button>
                                    </span>
                                </el-dialog>
                            </el-form-item>
                        </el-form>
                    </div>
                    <div class="grid-content bg-purple">
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <span class="input-group-text" id="inputGroupFileAddon01">封面图片</span>
                            </div>
                            <div class="custom-file">
                                <form method="post" enctype="multipart/form-data">
                                    <input  @change="getFile($event)" type="file" class="custom-file-input" id="inputGroupFile01" aria-describedby="inputGroupFileAddon01">
                                    <label class="custom-file-label" for="inputGroupFile01">{{file.name}}</label>
                                </form>
                            </div>
                        </div>
                    </div>
                </el-col>
            </el-row>
            <div class="float-right mt-5">
                <a href="javascript:history.back(-1)"><el-button @click="">取 消</el-button></a>
                <el-button type="primary" @click="uploadPlayList">确 定</el-button>
            </div>
        </div>
    </div>
</body>
<script src="js/vue.js"></script>
<script src="js/axios.js"></script>
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/getParameter.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    let app = new Vue({
        el:"#cPlayListApp",
        data:{
            categorites:[],
            cates:[],
            plname:'',
            desc:'',
            playList:{},
            inputVisible: false,
            inputValue: '',
            dialogVisible:false,
            checkList:[],
            file:''
        },
        methods:{
            getFile(event) {
                this.file = event.target.files[0];
                console.log(this.file);
            },
            loadCategories:function (){
                let _this = this;
                axios.get("/music_platform/cate/findAll").then(function (response){
                    _this.categorites = response.data.data;
                })
            },
            loadPlayList:function (){
                let plid = getParameter("plid");
                if (plid!==null){
                    let _this = this;
                    if (plid!==null){
                        axios.get("/music_platform/playlist/playListDetail",{
                            params:{
                                plid:plid
                            }
                        }).then(function (response){
                            _this.playList=response.data.data;
                            _this.plname = response.data.data.plname;
                            _this.desc = response.data.data.desc;
                            for (let i of response.data.data.categories){
                                _this.cates.push(i.cname);
                                _this.checkList.push(i.cid);
                            }
                        })
                    }
                }
            },
            handleClose(tag) {
                this.checkList.splice(this.checkList.indexOf(tag), 1);
                this.cates=[];
                this.SetTagName();
            },
            SetTagName:function (){
                let _cates = this.categorites;
                let _ls = this.checkList;
                this.cates = [];
                for (let j of _ls){
                    for (let i=0;i<_cates.length;i++){
                        if (_cates[i].cid === j){
                            this.cates.push(_cates[i].cname);
                        }
                    }
                }
                this.dialogVisible = false;
            },
            uploadPlayList:function (){
                let plid = getParameter("plid");
                let formData = new FormData();
                formData.append('plname', this.plname);
                formData.append('desc', this.desc);
                formData.append('checkList', this.checkList);
                formData.append('file', this.file);
                formData.append('plid', plid);
                let config = {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                }
                axios.post('/music_platform/playlist/addOrUpdatePlayList', formData, config).then(function (response) {
                    location.href = document.referrer;
                })


                // let _this = this;
                // axios.put("/music_platform/playlist/addOrUpdatePlayList",{
                //     plid:plid,
                //     plname:_this.plname,
                //     cates:_this.checkList,
                //     desc:_this.desc,
                // }).then(function (response){
                //     location.href = document.referrer;
                // })
            }
        },
        watch:{
            checkList: {
                handler(newV,oldV) {
                    if(newV.length>3){
                        this.checkList.pop();
                        alert("数量超出！");
                    }
                },
                deep:true
            },
        },
        created:function (){
            this.loadCategories();
            this.loadPlayList();
        }
    })
</script>
</html>